<template>
  <div id="index">
    <!--    <dv-full-screen-container class="bg">-->
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div id="body1">
      <header>
        <!--    头部div start-->
        <div id="header1">
          <span style="font-size: 22px; color: gold">{{ NowTime }}</span>
        </div>
        <div id="header2">
          <h1 style="font-size: 36px">河南省业务受理监控</h1>
        </div>
        <div id="header3">
          <el-row :gutter="10">
            <el-col :span="4" class="ipp" style="color: gold">业务受理</el-col>
            <el-col :span="4" class="ipp">业务经办</el-col>
            <el-col :span="4" class="ipp">总体概览</el-col>
            <el-col :span="4" class="ipp">众人待遇</el-col>
            <el-col :span="4" class="ipp">全省通办</el-col>
            <el-col :span="4" class="ipp">社会服务</el-col>
          </el-row>
        </div>
      </header>
      <!--    头部div start-->
      <div style="display: flex">
        <!--    身体部分div start-->
        <div id="leftdiv">
          <!--    身体部分div左 start-->
          <div style="margin-bottom: 20px">
            <h1>河南省</h1>
            <div style="width:250px;height:40px">
              <p style="line-height:40px">当日受理</p> <a style="font-size:30px;color:#ffffff;">23.333</a>
              <p style="line-height:40px">笔</p>
            </div>
            <div style="width:250px;height:40px">
              <p style="line-height:40px">当日办结</p> <a style="font-size:30px;color:#ffffff;">14.566</a>
              <p style="line-height:40px">笔</p>
            </div>

            <div id="maps" style="width: 600px; height: 525px"></div>
          </div>
          <dv-border-box-12 class="left_buttom" style="width: 600px;">
            <el-row :gutter="10" style="padding:15px">
              <el-col :span="12">
                <p style="padding:15px">各渠道受理量占比</p>
                <dv-active-ring-chart
                  :config="config"
                  style="width: 300px; height: 300px; margin-top: 20px"
                />
              </el-col>
              <el-col :span="12">
                <div class="qn" style="border-left: 10px solid #10b6ef">
                  大厅受理:13774笔
                </div>
                <div class="qn" style="border-left: 10px solid #f76163">
                  网点受理:15024笔
                </div>
              </el-col>
            </el-row>
          </dv-border-box-12>
        </div>
        <!--    身体部分div左 end-->
        <div id="centrediv">
          <!--    身体部分div中 start-->
          <div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div
                  id="babikou"
                  style="width: 300ppx; height: 670px; padding: 10px"
                ></div>
              </el-col>
              <el-col :span="12">
                <div
                  id="babikoule"
                  style="width: 300ppx; height: 670px; padding: 10px"
                ></div>
              </el-col>
            </el-row>
          </div>
          <dv-border-box-12 class="left_buttom" style="width: 800px">
            <div
              id="main"
              style="width: 800px; height: 300px; padding: 10px"
            ></div>
          </dv-border-box-12>
        </div>
        <!--    身体部分div中 end-->
        <div id="rightdiv">
          <!--    身体部分div右边 start-->
          <dv-border-box-12 style="height: 680px">
            <div class="no" style="margin-bottom: 20px; height: 660px;padding:15px">
              <p style="padding: 10px">业务受理明细</p>
              <dv-scroll-board
                :config="configer"
                style="width: 500px; height: 220px; padding: 20px"
              />
            </div>
          </dv-border-box-12>
          <dv-border-box-12>
            <div class="no" style="display: flex">
              <div
                id="rightbuttom"
                style="width: 400px; height: 300px; padding: 20px"
              ></div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import henanJson from "../json/json_province_henan.json";
export default {
  data() {
    return {
      NowTime: new Date(),
      points: [
        {
          name: "郑州",
          coordinate: [0.48, 0.35],
        },
        {
          name: "新乡",
          coordinate: [0.52, 0.23],
        },
        {
          name: "焦作",
          coordinate: [0.43, 0.29],
        },
        {
          name: "开封",
          coordinate: [0.59, 0.35],
        },
        {
          name: "许昌",
          coordinate: [0.53, 0.47],
        },
        {
          name: "平顶山",
          coordinate: [0.45, 0.54],
        },
        {
          name: "洛阳",
          coordinate: [0.36, 0.38],
        },
        {
          name: "周口",
          coordinate: [0.62, 0.55],
        },
        {
          name: "漯河",
          coordinate: [0.56, 0.56],
        },
        {
          name: "南阳",
          coordinate: [0.37, 0.66],
        },
        {
          name: "信阳",
          coordinate: [0.55, 0.81],
        },
        {
          name: "驻马店",
          coordinate: [0.55, 0.67],
        },
        {
          name: "济源",
          coordinate: [0.37, 0.29],
        },
        {
          name: "三门峡",
          coordinate: [0.2, 0.36],
        },
        {
          name: "商丘",
          coordinate: [0.76, 0.41],
        },
        {
          name: "鹤壁",
          coordinate: [0.59, 0.18],
        },
        {
          name: "濮阳",
          coordinate: [0.68, 0.17],
        },
        {
          name: "安阳",
          coordinate: [0.59, 0.1],
        },
      ],
      lines: [
        {
          source: "新乡",
          target: "郑州",
        },
        {
          source: "焦作",
          target: "郑州",
        },
        {
          source: "开封",
          target: "郑州",
        },
        {
          source: "许昌",
          target: "郑州",
        },
        {
          source: "平顶山",
          target: "郑州",
        },
        {
          source: "洛阳",
          target: "郑州",
        },
        {
          source: "周口",
          target: "郑州",
        },
        {
          source: "漯河",
          target: "郑州",
        },
        {
          source: "南阳",
          target: "郑州",
        },
        {
          source: "信阳",
          target: "郑州",
        },
        {
          source: "驻马店",
          target: "郑州",
        },
        {
          source: "济源",
          target: "郑州",
        },
        {
          source: "三门峡",
          target: "郑州",
        },
        {
          source: "商丘",
          target: "郑州",
        },
        {
          source: "鹤壁",
          target: "郑州",
        },
        {
          source: "濮阳",
          target: "郑州",
        },
        {
          source: "安阳",
          target: "郑州",
        },
      ],
      bgImgSrc: "/src/assets/henan.svg",

      lunbo: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 45,
          },
          {
            name: "漯河",
            value: 29,
          },
        ],
        Fileer: {
          data: [
            {
              name: "南阳",
              value: 167,
            },
            {
              name: "周口",
              value: 67,
            },
            {
              name: "漯河",
              value: 123,
            },
            {
              name: "郑州",
              value: 55,
            },
            {
              name: "西峡",
              value: 98,
            },
          ],
          unit: "单位",
        },
        hoverPause: true,
      },
      configer: {
        title: {
          text: "业务受理明细",
        },
        data: [
          ["苍茫大地一剑尽挽破，何处繁华笙歌落"],
          ["谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。"],
          ["长夏逝去。山野间的初秋悄然涉足。"],
          ["江南风骨，天水成碧，天教心愿与身违"],
          ["有多少人喜欢你，可能就有多少人讨厌你。"],
          ["山河拱手，为君一笑。"],
          ["总在不经意的年生。回首彼岸。纵然发现光景绵长。"],
          ["红尘初妆，山河无疆。最初的面庞，碾碎梦魇无常，命格无双。"],
          ["念往昔，繁华竞逐。"],
          ["外面的烟花奋力的燃着，屋里的人激情的说着情话……"],
          ["既不回头，何必不忘。既然无缘，何须誓言。"],
          ["人天自两空，何相忘，何笑何惊人。"],
        ],
        oddRowBGC: "none",
        evenRowBGC: "none",
      },
      config: {
        data: [
          {
            name: "周口",
            value: 46.66,
          },
          {
            name: "南阳",
            value: 53.34,
          },
        ],
        legend: {
          data: ["大厅受理:13774笔", "网点受理:12047笔"],
          textStyle: {
            color: "#ffffff",
          },
        },
        color: ["#10B6EF", "#F76163"],
        showValue: true,
      },
      Height: "370px",
      loading: true,
      cbSum: 0,
      cbcount: 0,
      shSum: 0,
      shcount: 0,
      hycount: 0,
      hySum: 0,
      startTime: null,
      endTime: null,
      startPower: null,
      endPower: null,
      shipNameCn: null,
      powerSum: null,
      select2: "",
      timer: null, //定时器
    };
  },

  mounted() {
    let that = this;
    this.timer = setInterval(function () {
      that.NowTime = new Date().toLocaleString();
    });
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  created() {
    this.$nextTick(function () {
      this.getmycharts();
      this.getmychart();
      this.getmychar();
      this.getmycharr();
      this.getmaps();
    });
  },
  // 可以判断如果定时器还在运行就关闭 或者直接关闭
  methods: {
    getmycharts() {
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        title: {
          type: "bar",
          text: "{a|         业务受理top5}",
          textStyle: {
            color: "#6BFBFF",
            rich: {
              a: {
                color: "#6BFBFF",
                fontSize: "15",
                height: 30,
                width: 30,
                backgroundColor: {
                  image: require("../assets/icon3.png"),
                },
              },
            },
          },
        },
        tooltip: {},
        legend: {
          data: ["受理", "代办"],
          x: "600", // 'center' | 'left' | {number},
          y: "10",
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "企业人员终端社会保险关系",
            "企业人员参保登记",
            "享受待遇人员发放信息变更",
            "企业人员参保登记(补收)",
            "个人社会保险费补缴",
          ],
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "笔数",
          axisLine: {
            lineStyle: {
              color: "white",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#1F4B73",
            },
          },
        },
        series: [
          {
            name: "受理",
            type: "bar",
            data: [9000, 2000, 3600, 1000, 1000],
            barWidth: 30,
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#10b6ef" },
              ]),
            },
          },
          {
            name: "代办",
            type: "bar",
            data: [5000, 2000, 3600, 1000, 1000],
            barWidth: 30,
            itemStyle: {
              //柱形图圆角，初始化效果
              // 第一个值表示顶部的左上角，第二个值表示顶部右上角
              // 第三个值表示底部左下角，第四个值表示底部右下角
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#E74442" },
                { offset: 0.5, color: "#F75D5A" },
                { offset: 1, color: "#FF797B" },
              ]),
            },
          },
        ],
      });
    },
    getmychart() {
      var myChart = echarts.init(document.getElementById("rightbuttom"));
      myChart.setOption({
        textStyle: {
          color: "#ffffff",
        },
        title: {
          type: "line",
          text: "{a|        业务受理走势}",
          textStyle: {
            color: "#6BFBFF",
            rich: {
              a: {
                color: "#6BFBFF",
                fontSize: "15",
                height: 30,
                width: 30,
                backgroundColor: {
                  image: require("../assets/icon3.png"),
                },
              },
            },
          },

        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#1F4B73",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#1F4B73",
            },
          },
        },
        series: [
          {
            data: [0, 10, 20, 30, 45, 147, 260],
            type: "line",
            itemStyle: {
              normal: {
                color: "#8cd5c2", //改变折线点的颜色
                lineStyle: {
                  color: "#4BEAFF", //改变折线颜色
                },
              },
            },
          },
        ],
      });
    },
    getmychar() {
      var myChart = echarts.init(document.getElementById("babikoule"));
      myChart.setOption({
        textStyle: {
          color: "#ffffff",
        },
        title: {
          type: "bar",
          text: ["{a|         受理人Top10}"],
          textStyle: {
            color: "#6BFBFF",
            rich: {
              a: {
                color: "#6BFBFF",
                fontSize: "15",
                height: 30,
                width: 30,
                backgroundColor: {
                  image: require("../assets/icon3.png"),
                },
              },
            },
          },
        },
        tooltip: {},
        grid: {
          left: 60,
          top: 36,
          right: 50,
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "张三",
            "李四",
            "王五",
            "赵六",
            "刘七",
            "勾八",
            "冉九",
            "八十",
            "狗十一",
            "南12",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: false,
              margin: 30,
            },
          },
        },
        series: [
          {
            name: "地方",
            type: "bar",
            data: [90, 100, 100, 120, 180, 210, 250, 300, 300, 400],
            barWidth: 15,
            barGap: 10,
            smooth: true,
            itemStyle: {
              barBorderRadius: [0, 10, 10, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#425594" },
                { offset: 0.5, color: "#52A5C6" },
                { offset: 1, color: "#6BFBFF" },
              ]),
            },
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, -2],
                textStyle: {
                  color: "#ffffff",
                  fontSize: 13,
                },
                formatter: "{c}笔",
              },
            },
          },
        ],
      });
    },
    getmycharr() {
      var myChart = echarts.init(document.getElementById("babikou"));
      myChart.setOption({
        textStyle: {
          color: "#ffffff",
        },
        title: {
          type: "bar",
          text: ["{a|         区域受理量Top10}"],
          textStyle: {
            color: "#6BFBFF",
            rich: {
              a: {
                color: "#6BFBFF",
                fontSize: "15",
                height: 30,
                width: 30,
                backgroundColor: {
                  image: require("../assets/icon3.png"),
                },
              },
            },
          },
        },
        tooltip: {},
        grid: {
          left: 60,
          top: 36,
          right: 50,
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "郑州市",
            "新乡市",
            "安阳市",
            "驻马店市",
            "洛阳市",
            "南阳市",
            "信阳市",
            "周口市",
            "商丘市",
            "平顶山市",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: false,
              margin: 30,
            },
          },
        },
        series: [
          {
            name: "地方",
            type: "bar",
            data: [1001, 1300, 1800, 1900, 1980, 2000, 2040, 2010, 3000, 4000],
            barWidth: 15,
            barGap: 10,
            smooth: true,
            itemStyle: {
              barBorderRadius: [0, 10, 10, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#425594" },
                { offset: 0.5, color: "#52A5C6" },
                { offset: 1, color: "#6BFBFF" },
              ]),
            },
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, 1],
                textStyle: {
                  color: "#ffffff",
                  fontSize: 13,
                },
                formatter: "{c}笔",
              },
            },
          },
        ],
      });
    },
    getmaps() {
      var myChart = echarts.init(document.getElementById("maps"));
      echarts.registerMap("henan", henanJson, {});
      console.log(henanJson);
      myChart.setOption({
        title: {
          text: "省本级",
          x: "10",
          y: "150",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          formatter: function (params) {
            // console.log(params);
            return (
              params.seriesName + "<br>" + params.name + ":" + params.value[2]
            );
          },
        },
        legend: {
          x: "20",
          y: "400",
          itemWidth: 20,
          itemHeight: 20,
          data: [
            {
              icon: "circle",
              name: "受理量",
              textStyle: {
                color: "#ffffff",
              },
            },
          ],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          x: "right",
          y: "center",
          feature: {
            mark: { show: true },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            yueyang: true,
          },
        },
        geo: {
          show: true,
          map: "henan",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
        },
        series: [
          {
            type: "map",
            mapType: "henan",
            itemStyle: {
              normal: {
                label: {
                  show: true, //默认是否显示省份名称
                  textStyle: {
                    color: "#ffffff",
                  },
                },
                areaColor: "#08305A", //背景颜色
                areaStyle: {
                  color: "#08305A", //默认的地图板块颜色
                },
                borderWidth: 1,
                borderColor: "#2C9ED8",
              },
            },
            emphasis: {
              label: {
                show: true, //选中状态是否显示省份名称
              },
              areaStyle: {
                color: "#08305A", //选中状态的地图板块颜色
              },
            },
          },
          {
            name: "受理量",
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: function (val) {
              return val[2]; //返回data数组中对应的数值
            },
            rippleEffect: {
              scale: "2",
              brushType : 'stroke'
            },
            data: [
              { name: "郑州", value: [113.65, 34.76, 10] },
              { name: "荥阳", value: [113.35, 34.79, 10] },
              { name: "开封", value: [114.35, 34.79, 10] },
              { name: "平顶山", value: [113.29, 33.75, 10] },
              { name: "洛阳", value: [112.44, 34.7, 10] },
              { name: "焦作	", value: [113.21, 35.24, 10] },
              { name: "鹤壁", value: [114.17, 35.9, 10] },
              { name: "杞县", value: [114.77, 34.56, 10] },
              { name: "尉氏", value: [114.17, 34.41, 10] },
              { name: "新郑", value: [113.71, 34.4, 10] },
              { name: "登封", value: [113.02, 34.46, 10] },
              { name: "通许", value: [114.46, 34.48, 10] },
              { name: "中牟", value: [114, 34.73, 10] },
              { name: "密县", value: [113.35, 34.51, 20] },
              { name: "巩县", value: [112.96, 34.76, 20] },
              { name: "兰考", value: [114.81, 34.69, 20] },
              { name: "新乡", value: [113.85, 35.31, 20] },
              { name: "汲县", value: [114.05, 35.44, 20] },
              { name: "封丘", value: [114.04, 35.03, 20] },
              { name: "获嘉", value: [113.63, 35.27, 20] },
              { name: "温贺", value: [113.06, 34.94, 20] },
              { name: "济源", value: [112.57, 35.08, 20] },
              { name: "南阳", value: [112.53, 33.01, 20] },
              { name: "商丘", value: [115.65, 34.44, 20] },
              { name: "周口", value: [114.63, 33.63, 20] },
              { name: "驻马店", value: [114.02, 32.98, 40] },
              { name: "信阳", value: [114.08, 32.13, 30] },
              { name: "周口", value: [112.35, 34.49, 20] },
              { name: "宛城区", value: [112.55, 33.02, 10] },
              { name: "卧龙区", value: [112.53, 32.98, 10] },
              { name: "南召县", value: [112.43, 33.5, 10] },
              { name: "社旗县", value: [112.93, 33.05, 10] },
              { name: "三门峡市", value: [111.2, 34.78, 10] },
              { name: "许昌", value: [113.81, 34.02, 10] },
              { name: "漯河", value: [114.02, 33.56, 10] },
              { name: "濮阳", value: [114.98, 35.71, 10] },
            ],
            itemStyle: {
              color: "#5AEBF7",
            },
            hoverAnimation: true, //动画效果
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss">
#body1 {
  margin: 0;
  padding: 5px 15px 5px 15px;
  background: url(../assets/Homebodybg.png);
  background-size: cover;
  background-position: center center;
  /*overflow-y:auto; overflow-x:auto;*/
  width: 1890px;
  height: 1090px;
  /*全屏去除滚动条*/
  overflow-x: hidden;
  overflow-y: hidden;
}
NowTime {
  color: gold;
}
header {
  display: flex;
  width: 1890px;
  height: 104px;
  margin-bottom: 20px;
  background-image: url("../assets/headtitle.png");
  background-size: 100% 100%;
}
header #header1 {
  width: 600px;
  height: 100%;
}
header #header1 span {
  margin-left: 30px;
  line-height: 60px;

  color: white;
}
header #header2 {
  width: 690px;
  height: 100%;
}
header #header2 h1 {
  color: white;
  text-align: center;
  padding-top: 10px;
}
header #header3 {
  padding: 20px;
  color: white;
  font-size: 15px;
  width: 600px;
  height: 50px;
  margin-top: 10px;
}
.ipp {
  border: 1px solid white;
  border-radius: 5px;
  text-align: center;
}
#leftdiv {
  width: 616px;
  height: 946px;
  margin-right: 20px;
  h1 {
    margin-left: 50px;
    color: white;
  }
}
#centrediv {
  width: 800px;
  height: 946px;
  margin-right: 20px;
}
#rightdiv {
  width: 450px;
  height: 946px;
}
.no {
  box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
  width: 100%;
  height: 302px;
}
.centredivtop {
  width: 100%;
  height: 268px;
  margin-bottom: 20px;
  box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
}
#centre-div-bottom {
  width: 100%;
  height: 370px;
  overflow: hidden;
  box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
}
p {
  display: inline;
  margin-left: 5px;
  font-size: 20px;
  color: rgba(38, 255, 251, 0.8);
}
.bg-purple {
  color: rgba(38, 255, 251, 0.8);
  font-size: 20px;
  padding: 15px 0px 0px 30px;
}
.bg-purple1 {
  color: white;
  font-size: 20px;
  padding: 15px 0px 0px 0px;
  text-decoration: underline;
}
.maps {
  position: absolute;
}
.no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  &::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    top: 0;
    left: 0;
  }
  &::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
  }
  ul {
    list-style-type: none;
    display: flex;
    li {
      position: relative;
      flex: 1;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 30px;
      color: rgba(38, 255, 251, 0.8);
      padding: 4px 0;
      font-family: electronicFont;
      font-weight: bold;
      &:first-child::after {
        content: "";
        position: absolute;
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
        right: 0;
        top: 25%;
      }
    }
  }
}
.left_buttom {
  color: white;
  font-size: 20px;
  box-shadow: inset 0 0 11px 2px #2f80bf, 0 0 11px 3px #2f80bf;
}
.qn {
  margin-top: 50px;
  padding: 10px;
}
.no-bd ul {
  list-style-type: none;
  display: flex;
  li {
    flex: 1;
    height: 5px;
    line-height: 5px;
    text-align: center;
    font-size: 20px;
    color: rgba(38, 255, 251, 0.8);
  }
}
.bai{
  color: white;
  font-size: 40px;
  position: absolute;
  left: 20;
    top:20;

}
.dv-scroll-board {
  padding: 10px;
}
.no1-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  &::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
    top: 0;
    left: 0;
  }
  &::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
  }
  ul {
    list-style-type: none;
    display: flex;
    li {
      position: relative;
      flex: 1;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 30px;
      color: rgba(38, 255, 251, 0.8);
      padding: 4px 0;
      font-family: electronicFont;
      font-weight: bold;
      &:first-child::after {
        content: "";
        position: absolute;
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
        right: 0;
        top: 25%;
      }
    }
  }
}

.no1-bd ul {
  list-style-type: none;
  display: flex;
  li {
    flex: 1;
    height: 5px;
    line-height: 5px;
    text-align: center;
    font-size: 20px;
    color: rgba(38, 255, 251, 0.8);
  }
}
</style>
